<template>
  <el-container class="login-image exit">
    <div class="header"></div>
    <div style="color: white;position: relative;z-index: 1;height: 75px;line-height: 75px;text-align: center;font-weight: bold;font-size: 30px;margin: 0 auto">
      {{this.regionName}}网格化服务管理平台
    </div>
    <div style="width: 100%;text-align: center;color: white;font-size: 28px;font-weight: bold;">
      {{this.departmentName}}
    </div>
    <!--<div class="wrapper" id="wrapper">-->
    <!--<div class="custom-modules-crad" @click="to(item.id, item, index)" v-for="(item, index) in modules" :key="index" :label="item.name">-->
    <!--<img :src="item.src" style="width: 30%;position: absolute;top: 34%;left: 35%;" alt="">-->
    <!--<div class="text">{{item.name}}</div>-->
    <!--</div>-->
    <!--</div>-->
    <div class="main">
      <div class="y_mainTop">
        <div class="mainTopLeft">
          <div class="zzxxh"></div>
          <div class="zzText">综治信息化</div>
          <div class="zzxxhCard">
            <div @click="to('557889877961728001')"><img src="~@/assets/login/zz9.png" style="width: 150px;"></div>
            <div @click="to('567357834608590850')"><img src="~@/assets/login/fngl.png" style="width: 150px;"></div>
            <div @click="to('583331599756607489')"><img src="~@/assets/login/zzdsj.png" style="width: 150px;"></div>
            <div @click="to('')"><img src="~@/assets/login/pacj.png" style="width: 150px;"></div>
          </div>
        </div>
        <div class="mainTopRight">
          <div class="wggl"></div>
          <div class="wgText">网格管理</div>
          <div class="wgglCard">
            <div @click="to('560742082674737153')"><img src="~@/assets/login/wggl.png" style="width: 150px;"></div>
            <div @click="to('557890002599665666')"><img src="~@/assets/login/xtsz.png" style="width: 150px;"></div>
          </div>
        </div>
      </div>
      <div class="y_mainBottom">
        <div class="ywyy"></div>
        <div class="ywText">业务应用</div>
        <div class="ywyyCard">
          <div @click="to('576700135048839169')"><img src="~@/assets/login/sjgl.png" style="width: 150px;"></div>
          <div @click="to('')"><img src="~@/assets/login/xlgc.png" style="width: 150px;"></div>
          <div @click="to('')"><img src="~@/assets/login/hszl.png" style="width: 150px;"></div>
          <div @click="to('')"><img src="~@/assets/login/xxfb.png" style="width: 150px;"></div>
          <div @click="to('')"><img src="~@/assets/login/zhyw.png" style="width: 150px;"></div>
          <div @click="to('600965385315000321')"><img src="~@/assets/login/szyy.png" style="width: 150px;"></div>
          <div @click="to('')"><img src="~@/assets/login/clkk.png" style="width: 150px;"></div>
        </div>
      </div>
    </div>
    <div id="exit" @click="exit">
      <span class="iconfont el-icon-extend-tuichu" style="font-size: 28px;"></span>
      <span style="font-size: 14px;cursor: pointer;">退出</span>
    </div>
  </el-container>
</template>

<script>
import { findUserPermissionTree, logout, allDict } from '@/http/AppApi'
import {
  setUserPermissionTree,
  getUserGridTree,
  getUserDeptTree,
  clearSessionStorage,
  setActiveModuleId,
  getUserInfo
} from '@/utils/SessionDataUtil'
import {getUserRegionTree, clearLocalStrorage, setDictInfo} from '@/utils/LocalDataUtil'
import CookieUtil from '@/utils/CookieUtil'
export default {
  data () {
    return {
      modules: [],
      jsonData: {},
      isAutoPlay: false,
      regionName: '',
      deptCategoryName: '',
      departmentName: ''
    }
  },
  created () {
    this.getModules()
    this.getCustomerInfo()
  },
  mounted () {
    document.title = '综治网格化管理平台'
  },
  updated () {},
  methods: {
    loadDictData () {
      allDict().then(resp => {
        if (resp.code && resp.code === '200') {
          setDictInfo(resp.data)
          return false
        }
      })
    },
    to (id) {
      for (let i = 0; i < this.modules.length; i++) {
        if (this.modules[i]['id'] === id) {
          setActiveModuleId(this.modules[i]['id'])
          this.$store.commit('clear_tabs')
          const bigDataMenuId = '583331599756607489'
          const adhibitionId = '600965385315000321'
          if (this.modules[i]['id'] === bigDataMenuId) this.$router.push({path: '/BigData'})
          else if (this.modules[i]['id'] === adhibitionId) this.$router.push({path: '/adhibition'})
          else {
            if (this.modules[i].children[0].children) {
              let path = this.modules[i].children[0].children[0].uri
              this.$router.push({path: path})
              sessionStorage.setItem('currentClickMenuKey', 0)
            } else {
              let path = this.modules[i].children[0].uri
              this.$router.push({path: path})
              sessionStorage.setItem('currentClickMenuKey', 0)
            }
            // this.$router.push({path: '/modules'})
            // let routeData = this.$router.resolve({ path: '/modules' })
            // window.open(routeData.href, '_blank')
          }
        }
      }
      sessionStorage.removeItem('currentClickMenuKey')
    },
    getModulesPermission (userPermission) {
      if (userPermission && userPermission.length > 0) {
        let modules = []
        for (let i = 0; i < userPermission.length; i++) {
          if (userPermission[i].type === 'module') {
            modules.push(userPermission[i])
          } else continue
        }
        return modules
      } else return []
    },
    getModules () {
      let m = this
      findUserPermissionTree().then(resp => {
        if (resp.code && resp.code === '200') {
          setUserPermissionTree(resp.data)
          m.modules = m.getModulesPermission(resp.data)
          if (m.modules && m.modules.length > 0) {
            m.getSessionCache()
          }
        }
      })
    },
    getSessionCache () {
      getUserGridTree()
      getUserRegionTree()
      getUserDeptTree()
      this.loadDictData()
    },
    exit () {
      let m = this
      logout().then(resp => {
        if (resp.code && resp.code === '200') {
          m.$message({
            type: 'success',
            message: '退出成功'
          })
        }
      })
      clearSessionStorage()
      clearLocalStrorage()
      CookieUtil.clearToken()
      this.$router.push({path: '/login'})
    },
    getUserDeptTree () {},
    getCustomerInfo () {
      let userInfo = getUserInfo()
      if (userInfo) {
        this.regionName = userInfo.regionName
        this.deptCategoryName = userInfo.deptCategoryName
        this.departmentName = userInfo.departmentName
      }
    }
  }
}
</script>
<style scoped>
  .el-container{
    display: inline;
  }
  .login-image{
    width: 100%;
    height: 100%;
    /*background-image: url('~@/assets/login/firstPage_bg.jpg') ! important;*/
    background-image: url('~@/assets/login/bigBg3.png') ! important;
    background-size:100%;
    /*background: #111846;*/
  }
  .exit{
    position: relative;
  }
  #exit{
    position: absolute;
    bottom: 2.5%;
    left: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid aliceblue;
    background-color: aliceblue;
    opacity: 0.5;
  }
  #exit:hover{
    opacity: 0.8;
  }
  .header{
    position: absolute;
    width: 100%;
    height: 70px;
    background: url(~@/assets/login/header.png) no-repeat;
    background-size: 100% 100%;
  }
  .main{
    width: 100%;
    margin-top: 2%;
  }
  .y_mainTop{
    width: 85%;
    height: 250px;
    margin: 0 auto;
  }
  .mainTopLeft{
    width: 55.7%;
    height: 100%;
    float: left;
    position: relative;
  }
  .mainTopRight{
    width: 26.3%;
    height: 100%;
    float: right;
    position: relative;
  }
  .y_mainBottom{
    width: 85%;
    height: 250px;
    margin: 3% auto;
    position: relative;
  }
  .zzxxh{
    width: 100%;
    height: 10px;
    background: url(~@/assets/login/zzxxh.png) no-repeat;
    position: absolute;
    top: 9%;
  }
  .wggl{
    width: 100%;
    height: 10px;
    background: url(~@/assets/login/wg.png) no-repeat;
    position: absolute;
    top: 9%;
  }
  .ywyy{
    width: 100%;
    height: 10px;
    background: url(~@/assets/login/ywyy.png) no-repeat;
    position: absolute;
    top: 9%;
  }
  .zzText,.wgText,.ywText{
    color: white;
    margin-left: 0.5%;
  }
  .zzxxhCard{
    display: flex;
    justify-content: space-between;
    padding-top: 5%;
  }
  .wgglCard{
    display: flex;
    justify-content: space-between;
    padding-top: 11%;
  }
  .ywyyCard{
    display: flex;
    justify-content: space-between;
    padding-top: 2.8%;
  }
  img:hover{
    cursor:pointer
  }
</style>
